<template>
	<view class="page-content">
		<card2 v-if="canopyDensity != null" title="林地郁闭度面积" class="m-card">
			<view class="m-card-content f-content">
				<view class="flex a-items">
					<view class="a-item" v-for="(item, index) in canopyDensity" :key="index">
						<image :src="item.ico" mode="aspectFill" class="left"></image>
						<view class="right">
							<view class="title">{{ item.KEY }}</view>
							<view class="value">
								<text class="num">{{ item.VALUE }}</text>
								<text class="unit">{{ item.unit }}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="OBJDate != null" class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">林地郁闭度变化趋势图</view>
						<view class="unit">单位：{{ OBJDate.ybdbhqs.unit }}</view>
					</view>
					<view class="charts"><l-echart canvas-id="canvasLineA" id="canvasLineA" ref="canvasLineA"></l-echart></view>
				</view>
			</view>
		</card2>
		<card2 v-if="OBJDate != null" title="林地种类分析" class="m-card">
			<view class="m-card-content blueBox">
				<view class="charts"><l-echart canvas-id="canvasLineB" id="canvasLineB" ref="canvasLineB"></l-echart></view>
			</view>
		</card2>
		<card2 v-if="woodland != null" title="林地类别分析" class="m-card">
			<view class="m-card-content blueBox">
				<!-- <scollBar3 :tab="['公益林', '商品林']" @change="woodlandChange"></scollBar3> -->
				<view class="woodlandWar">
					<view class="woodlandItem" v-for="(item, index) in woodland[1]" :key="'a' + index">
						<image class="left" mode="aspectFill" src="@/static/mapMonitor/ld02.png"></image>
						<view class="right">
							<view class="top">{{ item.sort }}</view>
							<view class="center">{{ item.area }}</view>
						</view>
					</view>
					<view class="woodlandItem" v-for="(item, index) in woodland[2]" :key="'b' + index">
						<image class="left" mode="aspectFill" src="@/static/mapMonitor/ld02.png"></image>
						<view class="right">
							<view class="top">{{ item.sort }}</view>
							<view class="center">{{ item.area }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="woodlandContWar">{{ woodland.content }}</view> -->
			</view>
		</card2>
		<card2 v-if="ecologicalEngineeringIntroduce != null" title="生态工程" class="m-card">
			<view class="m-card-content r-content" style="padding-top: 0;">
				<view class="introduceWar">
					<view class="row">
						<view class="item">
							<view class="l">工程名称：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.name }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">工程介绍：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.introduce }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">工程造价：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.cost }} 万</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">修复位置:</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.position }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">修复措施：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.repair_step }}</view>
						</view>
					</view>
					<scollBar3 style="margin-top: 40rpx" :tab="['修复前后郁闭度对比', '修复前后固碳量对比']" @change="contrastChange"></scollBar3>
					<view v-if="contrastIndex == 1" class="charts-box engineering">
						<view class="charts"><l-echart canvas-id="engineeringA" id="engineeringA" ref="engineeringA"></l-echart></view>
					</view>
					<view v-if="contrastIndex == 2" class="charts-box">
						<view class="flex charts-title">
							<view class="flex-item title">固碳量对比图</view>
							<view class="unit">单位：吨</view>
						</view>
						<view class="charts"><l-echart canvas-id="engineeringB" id="engineeringB" ref="engineeringB"></l-echart></view>
					</view>
					<swiper
						class="swiper"
						previous-margin="60rpx"
						next-margin="60rpx"
						:indicator-dots="false"
						:autoplay="autoplay"
						:interval="interval"
						:duration="duration"
						circular="true"
						@change="swierChange"
					>
						<swiper-item v-for="(item, index) in switchs" :key="'D' + index">
							<image :class="currentIndex === index ? 'active' : ''" class="swImage" :src="item.url" mode="aspectFill"></image>
							<view class="swtitle">{{ item.name }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</card2>
		<card2 v-if="planListGrass != null" title="优势植物" class="m-card">
			<view class="m-card-content r-content">
				<view v-if="planListGrass != null" class="tress">
					<view class="titleWar">
						<image class="image" src="@/static/mapMonitor/l01.png" mode="aspectFill"></image>
						<text class="title">优势草种</text>
						<image class="image" src="@/static/mapMonitor/r01.png" mode="aspectFill"></image>
					</view>
					<view class="rowWar">
						<view class="row" v-for="(item, index) in planListGrass" :key="index">{{ item }}</view>
					</view>
				</view>
				<view v-if="planListTrees != null" class="tress">
					<view class="titleWar">
						<image class="image" src="@/static/mapMonitor/l01.png" mode="aspectFill"></image>
						<text class="title">优势树种</text>
						<image class="image" src="@/static/mapMonitor/r01.png" mode="aspectFill"></image>
					</view>
					<view class="rowWar">
						<view class="rowWar">
							<view class="row" v-for="(item, index) in planListTrees" :key="index">{{ item }}</view>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 v-if="EcologicalRestoration != null" title="生态破坏脆弱区分析" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/st.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="itemBox border1" style="margin-right: 30rpx;">
						<view class="title">脆弱区面积</view>
						<view class="value">
							<text>{{ EcologicalRestoration.area }}</text>
							亩
						</view>
					</view>
					<view class="itemBox border1">
						<view class="title">占总面积比例</view>
						<view class="value">
							<text>{{ EcologicalRestoration.VALUE }}</text>
							%
						</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">动态变化</view>
						<view class="unit">单位：亩</view>
					</view>
					<view class="charts"><l-echart canvas-id="canvasLineC" id="canvasLineC" ref="canvasLineC"></l-echart></view>
				</view>
			</view>
		</card2>
	</view>
</template>

<script>
import scollBar3 from '@/components/scroll-bar/scroll-bar3.vue';
import card2 from '@/components/card/card2.vue';
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
let _self, canvaLineA, canvaLineB, canvaLineC;
export default {
	data() {
		return {
			OBJDate: null,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			ecologicalEngineeringIndex: 0,
			index: 0,
			planIndex: 0,
			managementData: '',
			planData: '',
			planName: {
				优: 'excellent',
				良: 'good',
				中: 'in',
				差: 'difference'
			},
			woodlandType: [],
			woodlandIndex: 1,
			axisLabel: {
				interval: 0,
				formatter: function(value) {
					debugger;
					var ret = ''; //拼接加\n返回的类目项
					var maxLength = 1; //每项显示文字个数
					var valLength = value.length; //X轴类目项的文字个数
					var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
					if (rowN > 1) {
						//如果类目项的文字大于3,
						for (var i = 0; i < rowN; i++) {
							var temp = ''; //每次截取的字符串
							var start = i * maxLength; //开始截取的位置
							var end = start + maxLength; //结束截取的位置
							//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
							temp = value.substring(start, end) + '\n';
							ret += temp; //凭借最终的字符串
						}
						return ret;
					} else {
						return value;
					}
				}
			},
			autoplay: true,
			interval: 5000,
			duration: 500,
			currentIndex: 0,
			contrastIndex: 1
		};
	},
	watch: {
		contrastIndex: function() {
			this.engineeringAOP();
		},
		OBJDate: function(value) {
			if (value != null) {
				let canvasLineAOption = {
					name: '湿地盐碱地面积监测',
					color: ['#F39800'],
					grid: [{ left: '10%', top: '5%', right: '5%' }],
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						data: value.ybdbhqs.x,
						type: 'category',
						boundaryGap: false,
						axisTick: {
							inside: true
						},
						axisLine: {
							show: false
						},
						boundaryGap: ['1%', '1%'],
						minInterval: 1,
						max: 'dataMax',
						scale: true
					},
					yAxis: {
						type: 'value',
						min: function(value) {
							return 0;
						},
						max: function(value) {
							return value.max;
						},
						nameTextStyle: {
							padding: [5, 5, 5, 5]
						}
					},
					series: [
						{
							data: value.ybdbhqs.data,
							type: 'line',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.canvasLineA.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(canvasLineAOption);
						return chart;
					});
				});
				let BLIST = [];
				for (var i = 0; i < value.ldzl.data.length; i++) {
					BLIST.splice(i, 0, { value: value.ldzl.data[i], name: value.ldzl.x[i] });
				}
				let canvasLineBOption = {
					name: '林地种类分析',
					color: ['#89C997', '#84CCC9', '#8FC31F', '#638C0B', '#F8B551', '#22AC38', '#CCE198'],
					grid: [{ left: '1%', top: '1%', right: '1%', bottom: '1%' }],
					tooltip: {
						trigger: 'item'
					},
					graphic: {
						elements: [
							{
								type: 'image',
								style: {
									image: value.ldzl.ico,
									width: 100,
									height: 100
								},
								// x: -40,
								// y: -40,
								left: 'center',
								top: 'center'
							}
						]
					},
					legend: {
						top: '1%',
						left: 'center'
					},
					series: [
						{
							name: '林地种类',
							type: 'pie',
							radius: ['30%', '50%'],
							data: BLIST
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.canvasLineB.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(canvasLineBOption);
						return chart;
					});
				});
				let canvasLineCOption = {
					name: '变化情况',
					color: ['#F39800'],
					grid: [{ left: '10%', top: '5%', right: '5%' }],
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						data: value.stphcrq.x,
						type: 'category',
						boundaryGap: false,
						axisTick: {
							inside: true
						},
						axisLine: {
							show: false
						},
						boundaryGap: ['1%', '1%'],
						minInterval: 1,
						max: 'dataMax',
						scale: true
					},
					yAxis: {
						type: 'value',
						min: function(value) {
							return 0;
						},
						max: function(value) {
							return value.max;
						},
						nameTextStyle: {
							padding: [5, 5, 5, 5]
						}
					},
					series: [
						{
							data: value.stphcrq.data,
							type: 'line',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.canvasLineC.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(canvasLineCOption);
						return chart;
					});
				});
				this.engineeringAOP();
			}
		}
	},
	computed: {
		canopyDensity: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.ybdjc;
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		woodland: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.ldlbfx;
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		planListGrass: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.stxfgh.grass;
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		planListTrees: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.stxfgh.trees;
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		ecologicalEngineeringIntroduce: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.stgc.stgcjs[OBJDate.stgc.stgcjs.length - 1];
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		switchs: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.stgc.stgcico;
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		EcologicalRestoration: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				try {
					value = OBJDate.stphfx[OBJDate.stphfx.length - 1];
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		bioDiversity: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				// value = {};
				// value.d1 = OBJDate.swdyxjc.find(item => item.KEY === '植物种类');
				// value.d1 = value.d1.VALUE;
				// value.d2 = OBJDate.swdyxjc.find(item => item.KEY === '植物大致数量');
				// value.d2 = value.d2.VALUE;
				// value.d3 = OBJDate.swdyxjc.find(item => item.KEY === '动物数量');
				// value.d3 = value.d3.VALUE;
				// value.d4 = OBJDate.swdyxjc.find(item => item.KEY === '动物大致数量');
				// value.d4 = value.d4.VALUE;
				// value.d5 = OBJDate.swdyxjc.find(item => item.KEY === '适宜树种');
				// value.d5 = value.d5.VALUE;
				// value.d6 = OBJDate.swdyxjc.find(item => item.KEY === '适宜草种');
				// value.d6 = value.d6.VALUE;
			}
			return value;
		}
	},
	components: {
		card2,
		scollBar3
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(630);
		this.cHeight = uni.upx2px(370);
		this.getData();
	},
	methods: {
		engineeringAOP() {
			if (this.OBJDate == null) {
				return false;
			}
			if (this.contrastIndex == 1) {
				let repair = this.OBJDate.stgc.ybdbh;
				let engineeringAOP = {
					series: [
						{
							type: 'gauge',
							startAngle: 240,
							endAngle: -60,
							min: 0,
							max: 100,
							center: ['25%', '50%'],
							itemStyle: {
								color: '#F8B551'
							},
							pointer: {
								show: false
							},
							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 0
								}
							},
							axisLine: {
								lineStyle: {
									width: 10
								}
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								distance: 50
							},
							data: [
								{
									value: repair[0].VALUE,
									name: repair[0].KEY,
									title: {
										offsetCenter: ['0%', 30]
									},
									detail: {
										offsetCenter: ['0%', -10]
									}
								}
							],
							title: {
								fontSize: 18
							},
							detail: {
								width: 50,
								height: 40,
								fontSize: 28,
								color: 'auto',
								borderColor: 'auto',
								borderRadius: 0,
								borderWidth: 0,
								formatter: '{value}%'
							}
						},
						{
							type: 'gauge',
							startAngle: 240,
							endAngle: -60,
							min: 0,
							max: 100,
							center: ['75%', '50%'],
							itemStyle: {
								color: '#00B27A'
							},
							pointer: {
								show: false
							},
							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 0
								}
							},
							axisLine: {
								lineStyle: {
									width: 10
								}
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								distance: 50
							},
							data: [
								{
									value: repair[1].VALUE,
									name: repair[1].KEY,
									title: {
										offsetCenter: ['0%', 30]
									},
									detail: {
										offsetCenter: ['0%', -10]
									}
								}
							],
							title: {
								fontSize: 18
							},
							detail: {
								width: 50,
								height: 40,
								fontSize: 28,
								color: 'auto',
								borderColor: 'auto',
								borderRadius: 0,
								borderWidth: 0,
								formatter: '{value}%'
							}
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.engineeringA.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(engineeringAOP);
						return chart;
					});
				});
			} else {
				let repair = this.OBJDate.stgc.gtl;
				repair = repair[repair.length - 1];
				let engineeringBOP = {
					name: '修复前后固碳量对比',
					color: ['#F39800', '#00B27A'],
					grid: { left: '15%', top: '5%', right: '5%' },
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						data: ['修复前', '修复后'],
						type: 'category',
						boundaryGap: false,
						axisTick: {
							inside: true
						},
						axisLine: {
							show: false
						},
						boundaryGap: ['1%', '1%'],
						minInterval: 1,
						max: 'dataMax',
						scale: true
					},
					yAxis: {
						type: 'value',
						min: function(value) {
							return 0;
						},
						max: function(value) {
							return value.max;
						},
						nameTextStyle: {
							padding: [5, 5, 5, 5]
						}
					},
					series: [
						{
							data: [repair.XFQ, ''],
							type: 'bar',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						},
						{
							data: ['', repair.XFH],
							type: 'bar',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.engineeringB.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(engineeringBOP);
						return chart;
					});
				});
			}
		},
		getData() {
			this.$$.request(
				{
					url: this.config.getMhsMessage,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					if (res.code == 2000) {
						console.log(res.data);
						this.OBJDate = res.data;
					}
				})
				.catch(error => {
					console.log('程序错误', error.message);
				})
				.finally(() => {
					console.log('complate');
				});
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.ecologicalEngineeringIndex = e.target.value;
		},
		bindPickerChange1: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.planIndex = e.target.value;
		},
		contrastChange(value) {
			console.log(value);
			this.contrastIndex = value;
		},
		woodlandChange(value) {
			this.woodlandIndex = value;
		},
		swierChange(e) {
			this.currentIndex = e.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
.charts-box {
	.charts-title {
		padding: 30rpx 0 10rpx;
		font-size: 24rpx;

		.title {
			color: #333;
		}

		.unit {
			color: #999;
		}
	}
	&.engineering {
		.charts {
			height: 210px;
		}
	}
}

.charts {
	width: 100%;
	height: 370rpx;
	background-color: #ffffff;
}

.page-content {
	background-color: #ffffff;
}

.m-card {
	.m-card-content {
		position: relative;
		.company {
			position: absolute;
			top: 90rpx;
			right: 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 1;
		}
		.img {
			display: block;
			margin: 29rpx auto 42rpx auto;
			width: 200rpx;
			height: 140rpx;
		}
	}
	.blueBox {
		.charts {
			width: 100%;
			height: 755rpx;
		}
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		.woodlandWar {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			// margin-top: 50rpx;
			.woodlandItem {
				width: 340rpx;
				height: 120rpx;
				background: #f3f8f9;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				padding-left: 21rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.left {
					min-width: 60rpx;
					width: 60rpx;
					height: 60rpx;
					margin-right: 36rpx;
				}
				.right {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: stretch;
					justify-content: center;
					.top {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						line-height: 1;
					}
					.center {
						margin-top: 21rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #00a0e9;
						line-height: 1;
					}
				}
			}
		}
		.woodlandContWar {
			margin-top: 30rpx;
			width: 100%;
			min-height: 164rpx;
			background: rgba(243, 248, 249, 0);
			border: 1rpx solid #d5d5d5;
			padding: 42rpx 45rpx 41rpx 53rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 52rpx;
			box-sizing: border-box;
		}
	}
	.p-content {
		position: relative;
		padding: 80rpx 0 125rpx;
		margin: -30rpx 0 -30rpx;

		.img {
			width: 292rpx;
		}

		.items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			width: 34%;
			margin-top: 40rpx;

			&:nth-child(even) {
				.title,
				.value {
					padding-left: 60rpx;
				}
			}

			&:nth-child(odd) {
				padding-left: 30rpx;
			}
		}

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1;
		}

		.value {
			font-size: 28rpx;
			color: #999;
			line-height: 1;
			text {
				line-height: 1;
				font-size: 36rpx;
				color: #00a0e9;
			}
		}
	}

	.r-content {
		position: relative;

		.grade {
			position: absolute;
			top: 10rpx;
			left: 50%;
			font-size: 60rpx;
			color: #00dcb0;
			transform: translateX(-50%);
		}

		.flex {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.title {
				font-size: 28rpx;
				color: #333;
			}

			.value {
				font-size: 28rpx;
				font-weight: 700;
				color: #999;

				text {
					font-size: 30rpx;
				}
			}

			.uni-input::after {
				font-family: iconfont;
				content: '\e659';
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
		.introduceWar {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			.charts-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: transparent;
				margin: 10rpx 0;
				padding: 0;
			}
			.row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				box-sizing: border-box;
				padding: 37rpx 0 36rpx 0;
				border-bottom: 1rpx solid #e5e5e5;
				line-height: 32px;
				&:nth-child(1) {
					padding-top: 0;
				}
				.item {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 28rpx;
					font-weight: 500;
					.l {
						min-width: 5em;
						width: 5em;
						color: #333333;
					}
					.r {
						color: #00a0e9;
					}
				}
			}
		}
		.tress {
			.titleWar {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				.image {
					width: 252rpx;
					height: 36rpx;
				}
				.title {
					min-width: 175rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 1;
					text-align: center;
				}
				margin-bottom: 50rpx;
			}
			.rowWar {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				.row {
					box-sizing: border-box;
					padding: 16rpx 30rpx;
					height: 60rpx;
					background: #f3f8f0;
					border: 2rpx solid #22ac38;
					border-radius: 30rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #009944;
					line-height: 1;
					margin-left: 18rpx;
					margin-right: 18rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}

	.f-content {
		.items {
			justify-content: space-between;
			margin: 0 -7rpx;
		}
		.itemBox {
			flex: 1;
			height: 120rpx;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.item {
			flex: 1;
			// margin: 0 7rpx;
			height: 120rpx;
			text-align: center;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				width: 1rpx;
				height: 74rpx;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				background-color: #e5e5e5;
			}
			&:nth-last-child(1) {
				&::after {
					width: 0;
					height: 0;
				}
			}
		}
		.a-items {
			width: 100%;
			// margin: 0 7rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			flex-wrap: wrap;
			position: relative;
			box-sizing: border-box;
			.a-item {
				height: 134rpx;
				background: #f4f8fe;
				border-radius: 4rpx;
				width: 335rpx;
				min-height: 134rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: row;
				margin-bottom: 20rpx;
				.left {
					width: 74rpx;
					height: 74rpx;
					margin-right: 31rpx;
				}
				.right {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex-direction: column;
					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						line-height: 1;
					}
					.num {
						font-size: 36rpx;
						font-weight: bold;
						color: #00a0e9;
						line-height: 1;
					}
					.unit {
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
						line-height: 1;
					}
				}
				&:nth-child(1) {
					width: 100%;
				}
			}
		}
		.title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 1;
		}

		.value {
			font-size: 28rpx;
			color: #999;
			line-height: 1;

			text {
				line-height: 1;
				font-size: 36rpx;
				color: #00a0e9;
				margin-right: 7rpx;
			}
		}
	}

	.v-content {
		.video {
			margin-bottom: 40rpx;
			width: 100%;
			height: auto;
		}

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.tips {
			font-size: 30rpx;
			color: #787c90;
		}

		.title-bar {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;
		}

		.content {
			padding: 20rpx 30rpx;
			background: #f8f8f8;
			border-radius: 6rpx;

			.title {
				margin-bottom: 10rpx;
			}
		}
	}
}

.border1 {
	border: 1rpx solid #e5e5e5;
}
.swiper {
	position: relative;
	width: 100%;
	height: 410rpx;
	margin-top: 20rpx;
	.swImage {
		position: absolute;
		z-index: 5;
		width: 100%;
		height: 384rpx;
		opacity: 0.5;
		top: 13rpx;
		margin: 0 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
		&.active {
			opacity: 1;
			z-index: 10;
			height: 410rpx;
			width: 100%;
			top: 0;
			transition: all 0.2s ease-in 0s;
			border-radius: 8rpx;
		}
	}
	.swtitle {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 150rpx;
		height: 50rpx;
		background-color: #000000;
		opacity: 0.5;
		border-radius: 25rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 50rpx;
		z-index: 20;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
